<template>
  <div class="stationInfo-page">
    <div v-if="state.infoData && state.infoData.length > 0">
      <div v-for="(item, index) in state.infoData" :key="index" class="info-card">
        <div class="card-body">
          <table class="info-table">
            <tbody>
            <tr>
              <td class="field-name">站点名称</td>
              <td>{{ item.stnm || "未知站点" }}</td>
              <td class="field-name">预警级别</td>
              <td>
                                        <span :class="['status-badge', item.warnLevel == 1 ? 'status-high' : 'status-medium']">
                                            {{ item.warnLevel == 1 ? "极高风险" : "高风险" }}
                                        </span>
              </td>
            </tr>
            <tr>
              <td class="field-name">预警发生时间</td>
              <td>{{ item.tm ? dayjs(item.tm).format('YYYY-MM-DD HH:mm:ss') : "未知" }}</td>
              <td class="field-name">通信方式</td>
              <td  >
                <span v-if="item.msgType == 1">短信</span>
                <span v-else-if="item.msgType == 2">电话</span>
                <span v-else-if="item.msgType == 3">电话和短信</span>
                <span v-else>未知</span>
              </td>
            </tr>
            <tr>
              <td class="field-name">发送对象</td>
              <td colspan="3">{{ item.target || "未指定" }}</td>
            </tr>
            <tr>
              <td class="field-name">短信/电话内容</td>
              <td colspan="3">{{ item.content || "无内容" }}</td>
            </tr>
            </tbody>
          </table>
        </div>

        <div class="card-footer">
          倒计时：{{ formatCountdown(item,index) }}
          <button class="btn btn-outline" @click="cancelSend(item, index)">
            <i class="fas fa-times"></i>
            取消发送
          </button>
          <button class="btn btn-primary" @click="sendNow(item, index)">
            <i class="fas fa-paper-plane"></i>
            立即发送
          </button>
        </div>
      </div>
    </div>

    <div v-else class="empty-state">
      <i class="fas fa-inbox"></i>
      <h3>暂无预警信息</h3>
      <p>当前没有需要处理的预警信息</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, watch, onMounted, onUnmounted, nextTick} from "vue";

import { getLogs } from "@/api/warningInfo/baseData";
import dayjs from 'dayjs';
import {getWarnTask, sendMsgLJ} from "@/api/webservice/weather";
const emit = defineEmits(['success', 'close']);
defineOptions({ name: "StationInfo" });
const state = reactive({
  infoData: null,
  refreshInterval: null
});

const props = defineProps({
  data: { type: Object },
});

watch(
  () => props.data,
  async () => {
    await getStationDataInfo();
  }
);
// 计算倒计时
const formatCountdown = (item,index) => {

  if (!item.createTime) return "未知时间";

  const now = new Date();
  const createTime = new Date(item.createTime);
  const elapsed = now - createTime;
  const remaining = Math.max(0, 120 - Math.floor(elapsed / 1000));

  if (remaining <= 0) {
    sendNow(item,index);
    return "已超时";
  }

  const minutes = Math.floor(remaining / 60);
  const seconds = remaining % 60;

  return `${minutes}分${seconds}秒后自动发送`;
};

// 获取倒计时样式类
const getCountdownClass = (item) => {
  if (!item.createTime) return "";

  const now = new Date();
  const createTime = new Date(item.createTime);
  const elapsed = now - createTime;
  const remaining = 120 - Math.floor(elapsed / 1000);

  if (remaining <= 30) {
    return "danger";
  } else if (remaining <= 60) {
    return "warning";
  }

  return "";
};

// 立即发送处理
const sendNow = async (item, index) => {
  console.log("立即发送", item, index);
  // alert(`立即发送预警信息：${item.stnm}`);
  // 这里可以添加API调用
  item.isSend=1;
  await sendMsgLJ(item);
  nextTick();
  const warnTask = await  getWarnTask();
  console.log('--------warnTask----',warnTask);
  if(warnTask.length==0){
    emit('close', warnTask)
  }else{
    state.infoData=[];
    nextTick();
    state.infoData=warnTask;
  }
};

// 取消发送处理
const cancelSend = async (item, index) => {
  console.log("取消发送", item, index);
  item.isSend = 2;//取消发送
  await sendMsgLJ(item);
  nextTick();
  const warnTask = await getWarnTask();
  //console.log('--------warnTask----', warnTask);
  if (warnTask.length == 0) {
    emit('close', warnTask)
  }else{
    state.infoData=[];
    nextTick();
    state.infoData=warnTask;
  }
};
const getStationDataInfo = async () => {
  if (props.data) {
    state.infoData = props.data;
    console.log('-----------',state.infoData);
  }
};

onMounted(async () => {
  state.refreshInterval = setInterval(() => {
    // 这里会触发响应式更新，因为我们在模板中使用了实时计算的时间
    // 创建一个新的数组来触发响应式更新
    state.infoData = [...state.infoData];
  }, 1000);
});
onUnmounted(() => {
  if (state.refreshInterval) {
    clearInterval(state.refreshInterval);
  }
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
  color: #333;
  padding: 20px;
}

.stationInfo-page {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 24px;
  height: 100%;
  min-height: 500px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #1c1c1e;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title i {
  color: var(--primary-color);
}

.info-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}



.card-header {
  background: linear-gradient(135deg, #2c80ff 0%, #6c47ff 100%);
  color: white;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.countdown {
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.countdown.warning {
  background-color: #fff6e5;
  color: #ff9500;
}

.countdown.danger {
  background-color: #ffe5e5;
  color: #ff3b30;
}

.card-body {
  padding: 20px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.info-table tr td {
  border: 1px solid #e9ecef;
  padding: 12px 16px;
}

.field-name {
  width: 15%;
  background: #f8f9fa;
  color: #495057;
  font-weight: 500;
}

.card-footer {
  padding: 16px 20px;
  background: #f8f9fa;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: #0066e8;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid #ced4da;
  color: #6c757d;
}

.btn-outline:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-high {
  background-color: #ffe5e5;
  color: #ff3b30;
}

.status-medium {
  background-color: #fff6e5;
  color: #ff9500;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ced4da;
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .field-name {
    width: 30%;
  }

  .card-footer {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
